<?php //echo "<pre>"; die(print_r($campaignReport)); ?>
<div class="inside">
   <div class="contentPanel full dashboard" style="padding-top: 20px !important;">
      <div class='pages' id='design'>
            <script src="<?php echo $baseurl?>public/theme/analytics/js/chart/highcharts.js"></script>
            <script src="<?php echo $baseurl?>public/theme/analytics/js/chart/modules/highcharts-3d.js"></script>
            <script src="<?php echo $baseurl?>public/theme/analytics/js/chart/modules/exporting.js"></script>
            <script type="text/javascript">
            $(function () {
                
                  Highcharts.theme = {
                    colors: ['#058DC7', '#50B432','#24CBE5',    '#64E572', 
                             '#FF9655','#DDDF00', '#FFF263','#ED561B', '#6AF9C4'],
                 
                };
                
                
                Highcharts.setOptions(Highcharts.theme);
            
                $('#container').highcharts({
                   chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            style: {
                                fontFamily: 'Tahoma,Arial,sans-serif'
                            }
                        },
                        title: {
                            text: 'Tỷ lệ lượt hiển thị trên các hệ điều hành'
                        },
                        tooltip: {
                    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    },
                                    connectorColor: 'silver'
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: 'Tổng số',
                            data: [
                                <?php foreach($os AS $le=>$el):?>
                                <?php if($le != 'tong_os'):?>
                                    ['<?php echo $le?>', <?php echo $el?>],
                                <?php endif;?>
                                <?php endforeach;?>
                            ]
                        }]
                    });
                });
            </script>
            <script type="text/javascript">
            $(function () {
                
                
                $('#container_3').highcharts({
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            style: {
                                fontFamily: 'Tahoma,Arial,sans-serif'
                            }
                        },
                        title: {
                            text: 'Tỷ lệ lượt hiển thị trên các thiết bị'
                        },
                        tooltip: {
                    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    },
                                    connectorColor: 'silver'
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: 'Tổng số',
                            data: [
                                <?php foreach($device AS $le=>$el):?>
                                <?php if($le != 'tong_device'):?>
                                    ['<?php echo $le?>', <?php echo $el?>],
                                <?php endif;?>
                                <?php endforeach;?>
                            ]
                        }]
                    });
                });
                
                
            </script>
            <script type="text/javascript">
            $(function () {
                    $('#container_2').highcharts({
                        
                        chart: {
                            type: 'line',
                            style: {
                                fontFamily: 'Tahoma,Arial,sans-serif'
                            }
                        },
                        title: {
                            text: 'Số lượt hiển thị trên trình duyệt',
                            x: -20 //center
                        },
                        xAxis: {
                            categories: [
                                <?php $ft = ''; foreach($browser AS $le=>$el):?>
                                <?php if($le != 'tong_browser'):?>
                                    <?php $ft .= ",'".$le."'";?>
                                <?php endif;?>
                                <?php endforeach;?>
                                <?php echo substr($ft, 1);?>
                            ]
                            
                        },
                        yAxis: {
                            title: {
                                text: 'Số lượt'
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        tooltip: {
                            valueSuffix: ''
                        },
            
                        plotOptions: {
                            line: {
                                dataLabels: {
                                    enabled: true
                                },
                                enableMouseTracking: false
                            }
                        },
                        
                    series: [{
                        type: 'column',
                        name: 'Tổng số ',
                        data: [<?php $ft = ''; foreach($browser AS $le=>$el):?><?php if($le != 'tong_browser'):?><?php $ft .= ",".$el;?><?php endif;?><?php endforeach;?> <?php echo substr($ft, 1);?>]
                    }, {
                        type: 'spline',
                        name: 'Tổng số',
                        data: [<?php $ft = ''; foreach($browser AS $le=>$el):?><?php if($le != 'tong_browser'):?><?php $ft .= ",".$el;?><?php endif;?><?php endforeach;?> <?php echo substr($ft, 1);?>],
                        marker: {
                        	lineWidth: 2,
                        	lineColor: Highcharts.getOptions().colors[3],
                        	fillColor: 'white'                
                        }
                    }]
                    
                    });
                });
            </script>
               
            <div class="workplace"> 
                <div class="page-header">
                    <h1><small>Thống kê nhanh</small></h1>
                </div>
                
               
                <div class="row-fluid">
                    <div class="span12">
                        <div class="block" style="margin: 10px;padding-bottom: 30px">
                            <div id="container_2" style="height: 400px"></div>
                        </div>
                    </div>             
                </div>
                
				<button onclick="report()" class="btn btn-success" style="float: right;margin-bottom: 20px;" title="Xuất báo cáo"><i class="fa fa-file-text-o"></i><span>Xuất báo cáo</span></button>
				
                <table id="report" class="report-table">
        			<thead>
        				<tr>
        					<th rowspan="2">Chiến dịch</th>
        					<th rowspan="2">Địa điểm</th>
        					<th colspan="2">Sức thu hút</th>
        					<th colspan="1">Hành vi</th>
        					<th colspan="3">Chuyển đổi</th>
        				</tr>
        				<tr>
        					<th>Lượt truy cập</th>
        					<th>Số người dùng</th>
        					<th>Tỷ lệ thoát trang chào</th>
        					<!--<th>Thời gian trung bình trang chào(s)</th>
                            <th>Thời gian trung bình trang đích(s)</th> -->
        					<th>Tỷ lệ tương tác</th>
        					<th>Số lần hiển thị trang chào</th>
                            <th>Số lần hiển thị trang đích</th>
        				</tr>
        			</thead>
        			<tbody class="list-rp"> 
                    <?php foreach($campaignReport AS $el=>$le):?>
                        <tr>
        				    <td><?php echo $le->campaign_title?></td>
                            <td><?php echo $le->nameplace?></td>
                            <td><?php echo $le->total_visit?></td>
                            <td><?php echo $le->user_visit?></td>
                            <td><?php echo $le->personNoClick?></td>
                           <!-- <td><?php echo $le->time_welcome_page; //$fview->convertDeltatime($le->time_welcome_page);?></td>
                            <td><?php echo $le->time_landing_page;?></td> -->
                            <td><?php echo $le->personClick?></td>
                            <td><?php //echo $le->welcome_page?>-</td>
                            <td><?php //echo $le->landing_page?>-</td>
        				</tr>
                    <?php endforeach;?>
        			</tbody>
        		</table>
                <div class="row-fluid load-more">
					<button class="btn btn-default text-load-more">Xem thêm</button>
               </div>
                <div class="row-fluid">
                    <div class="span6">
                        <div class="block" style="margin: 10px">
                            <div id="container" style="height: 400px"></div>
                        </div>
                    </div>
                    <div class="span6">
                        <div class="block" style="margin: 10px">
                            <div id="container_3" style="height: 400px"></div>
                        </div>
                    </div>           
                </div>
            </div>
            <style>
                .highcharts-legend-item:nth-child(2)
                {
                    display: none !important;
                }            
    			table{
    				border-spacing: 0;
    				border-collapse: collapse;
                    margin-bottom: 20px;
    			}
    			
    			.report-table{
    				width: 100%;
    				max-width: 100%;
    				text-align: center;
    			}
    			
    			.report-table th,.report-table td{
    				padding: 15px 20px;
    				border: 1px solid #aaa;
    			}
                
                .report-table tr:nth-child(odd){
    				padding: 15px 20px;
    				border: 1px solid #aaa;
                    background: #FFF;
    			}
                .report-table tr:nth-child(even){
    				padding: 15px 20px;
    				border: 1px solid #aaa;
                    background: #FAFAFA;
    			}
                
                .report-table th{
    				background: none repeat scroll 0 0 #efefef;
    			}
                
    			.report-table tbody{
    				color: #535353;
    			}
    		</style>
      </div>
   </div>
</div>

<script>
function convertDeltatime(deltaTime)
{
    var miligiay = deltaTime % (60 * 1000);
    var miligay_ = miligiay % 1000;
    var giay = (miligiay - miligay_) / 1000;
    var phut = (deltaTime - miligiay) / 60 / 1000;
    if (phut < 10) {
        phut = "0" + phut;
    }
    if (giay < 10) {
        giay = "0" + giay;
    }
    return phut + " phút " + giay + " giây " + miligay_ + " ms";
}

var last_id = 3;
$('.text-load-more').click(function(){
    showPreload();
    $.ajax({
        type:"GET",
        url: '<?php echo $baseurl;?>ajax-get-campaign-report-agency',
        data:{   
            last_id : last_id
		},
        success:function(data){
            hidePreload();
            console.log(data);
            var _data = JSON.parse(data);
            var html = '';
            if( _data.length > 0 ){
                for ( var i = 0; i < _data.length; i++){
                    //html +='<tr><td>'+_data[i].campaign_title+'</td><td>'+_data[i].nameplace+'</td><td>'+_data[i].total_visit+'</td><td>'+_data[i].user_visit+'</td><td>'+_data[i].personNoClick+'</td><td>'+_data[i].time_welcome_page+'</td><td>'+_data[i].time_landing_page+'</td><td>'+_data[i].personClick+'</td><td>'+_data[i].welcome_page+'</td><td>'+_data[i].landing_page+'</td></tr>';
					html +='<tr><td>'+_data[i].campaign_title+'</td><td>'+_data[i].nameplace+'</td><td>'+_data[i].total_visit+'</td><td>'+_data[i].user_visit+'</td><td>'+_data[i].personNoClick+'</td><td>'+_data[i].personClick+'</td><td>-</td><td>-</td></tr>';
                }
                $('.list-rp').append(html);
                last_id = parseInt(last_id)+3;   
            }else{
                $('.load-more').css("display","none");
            }
		}
    });
 });
</script>


<script>
function report()
{
    
    var time = $('#times').val();
    $(".preload").css('display','block');
    var link = 'reporting-agency';

    var url_report = '<?php echo $baseurl;?>'+link;
    OpenPop(url_report, 650, 990);
}


function OpenPop(popUrl, heights, widths) {
			var popUrl = popUrl;
            window.scrollTo(0, 0);
            var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
            var height = document.documentElement.clientHeight + document.documentElement.scrollTop;
            var layer = document.createElement("div");
            layer.style.zIndex = 999;
            layer.id = "layer";
            layer.style.position = "absolute";
            layer.style.top = "0px";
            layer.style.left = "0px";
            layer.style.height = document.documentElement.scrollHeight + "px";
            layer.style.width = width + "px";
            layer.style.backgroundColor = "black";
            layer.style.opacity = "0.75";
            layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=75)");
            document.body.style.position = "static";
            
            
            document.body.appendChild(layer);
            var iframe = document.createElement("iframe");
           
            iframe.name = "Export excel by nhatnv";
            iframe.id = "popup";
            iframe.src = popUrl;
            iframe.style.height = heights + "px";
            iframe.style.width = widths + "px";
            iframe.style.position = "fixed";
            iframe.style.zIndex = 999999;
            iframe.style.backgroundColor = "white";
            iframe.frameborder = "0";
            iframe.style.top = ((height + document.documentElement.scrollTop) / 2) - (heights / 2) + "px";
            iframe.style.left = (width / 2) - (widths / 2) + "px";
            document.body.appendChild(iframe);
        }
function ClosePop() {
    var layer = document.getElementById("layer");
    var iframe = document.getElementById("popup");
    document.body.removeChild(layer); // remove layer
    document.body.removeChild(iframe); // remove div
}
function closeIframe() {
    //window.parent.ClosePop();
}
</script>
